<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'/>
  <link rel='stylesheet' href='../../dist/mapbox.css'/>
  <link rel='stylesheet' href='embed.css'/>
  <script src='../../dist/mapbox.js'></script>
  <script src='access_token.js'></script>
</head>
<body>
<style>
    #onscreen {
      background:#fff;
      position:absolute;
      top:80px;
      left:10px;
      width:300px;
      height:100px;
      z-index:100;
      overflow:auto;
      padding:10px;
      -webkit-border-radius:3px;
              border-radius:3px;
    }
</style>
<div id='map'></div>
<pre id='onscreen'></pre>
<script>
    var map = L.mapbox.map('map', 'mapbox.light');

    var features = [];
    for (var x = -120; x < 120; x += 20) {
        for (var y = -80; y < 80; y += 10) {
            features.push({
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [x, y]
                },
                properties: {
                    'marker-color': '#000',
                    'marker-symbol': 'star-stroked',
                    title: [x, y].join(',')
                }
            });
        }
    }

    map.featureLayer.setGeoJSON({
        type: 'FeatureCollection',
        features: features
    });

    map.on('move', function() {
        // construct an empty list to fill with onscreen markers
        var inBounds = [],
        // get the map bounds - the top-left and bottom-right locations
            bounds = map.getBounds();

        // for each marker, consider whether it is currently visible by comparing
        // with the current map bounds
        map.featureLayer.eachLayer(function(marker) {
            if (bounds.contains(marker.getLatLng())) {
                inBounds.push(marker.options.title);
            }
        });

        // display a list of markers.
        document.getElementById('onscreen').innerHTML = inBounds.join('\n');
    });

    map.setView([37, -77], 5);
</script>
</body>
</html>
